<template>
    <el-form :model="formData" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import {ref} from 'vue';
  import {defineComponent} from 'element-plus';
  
  export default defineComponent({
    setup() {
      const formData = ref({
        username: '',
        password: ''
      });
  
      const rules = {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      };
  
      function submitForm() {
        refs.form.validate(valid => {
          if (valid) {
            // 表单验证通过，保存表单数据
            console.log(formData.value);
          }
        });
      }
  
      return {
        formData,
        rules,
        submitForm
      };
    }
  });
  </script>
  